<template>
  <div class="login-container">
      <el-alert
              v-show="false"
              title="尚品汇商城管理平台"
              type="success"
              :closable="false"
              style="position: fixed"
      ></el-alert>
      <el-row>
          <el-col :xs="24" :sm="24" :md="12" :lg="14" :xl="14">
              <div style="color: transparent"> 左侧区域占位符</div>
          </el-col >
          <el-col :xs="24" :sm="24" :md="12" :lg="10" :xl="10">
              <el-form
                ref="ruleFormRef"
                :model="ruleForm"
                status-icon
                :rules="rules"
                class="login-form"
              >
                  <div class="form-header">
                      <div class="title">Hello !</div>
                      <div class="title-tips">欢迎来到仓储物流管理</div>
                  </div>

                  <el-form-item prop="username">
                      <el-input
                        v-model = "ruleForm.username"
                        :prefix-icon="User"
                        autocomplete="off"
                        placeholder="请输入用户名"
                      ></el-input>
                  </el-form-item>
                  <el-form-item prop="password">
                      <el-input
                          v-model = "ruleForm.password"
                          type="password"
                          show-password
                          :prefix-icon="Lock"
                          autocomplete="off"
                          placeholder="请输入密码"
                      ></el-input>
                  </el-form-item>

                  <el-form-item>
                      <el-button
                       class="login-btn"
                       type="primary"
                       size="large"
                       :loading="loading"
                       @click="submitForm(ruleFormRef)"
                      >
                         登录
                      </el-button>
                  </el-form-item>
              </el-form>
          </el-col>
      </el-row>
  </div>
</template>

<script setup lang="ts">
import {User, Lock} from '@element-plus/icons-vue'

import {reactive, ref} from "vue";
import type {FormInstance, FormRules} from "element-plus";
import {login} from "@/api";
import {useUserStoreWithOut} from "@/stores/modules/user";
import {useRoute, useRouter} from "vue-router";
import {HOME_URL} from "@/config/config";
import {ElNotification} from "element-plus";
import {timeFix} from "@/utils";
import type {LoginData} from "@/api/user/types";

const userStore = useUserStoreWithOut()
const router = useRouter()
const route = useRoute()

const loading = ref(false)
// form ref
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<LoginData>({
    username:'shangguigu',
    password: '111111'
})

const validateUsername = (rule: any, value: string, callback:any) =>{
    if (value === ''){
        callback(new Error('用户名不能为空'))
    } else if(value.length < 4) {
        callback(new Error('用户名长度不能小于 4'))
    } else {
        callback()
    }
}

const validatePassword = (rule: any, value: string, callback:any) =>{
    if (value === ''){
        callback(new Error('密码不能为空'))
    } else if(value.length < 6) {
        callback(new Error('密码长度不能小于 6'))
    } else {
        callback()
    }
}

const rules = reactive<FormRules<typeof ruleForm>>({
    username: [{required: true, validator: validateUsername}],
    password: [{required: true, validator: validatePassword}]
})

const submitForm = (formEl: FormInstance | undefined) =>{
    if (!formEl) return
    formEl.validate(async (isValid) => {
        if (!isValid) return
        try {
            loading.value = true
            const { data } =  await login(ruleForm)
            userStore.setToken(data)
            router.replace(route.query.redirect as string || HOME_URL)
            ElNotification({
                title:`hi,${timeFix()}`,
                message:'欢迎回来！！！',
                type:'success'
            })
        } finally {
            loading.value = false
        }
    })
}

</script>

<style scoped lang="scss">
@import "./index";
</style>